<template>
  <div>
    <Banner :items="bannerData"></Banner>
    <div class="muReveal">
      <div class="muBr">
        <ul class="muSwitch flexc">
          <ListItem v-for="item in switchItems" :label="item.label" class="flex1"></ListItem>
        </ul>
      </div>
      <RevealList :params="paramsA" v-show="tabData.list1" :alias="alias"></RevealList>
      <RevealList :params="paramsB" v-show="tabData.list2" :alias="alias"></RevealList>
    </div>
  </div>
</template>

<style lang="less">
  .muReveal {
    .flexc {
      display: flex;
    }
    max-width: 1160px;
    margin: 0 auto;
    .muBr {
      border-bottom: 1px groove rgba(0, 0, 0, .1);
    }
    .muSwitch {
      width: 200px;
      margin: 0 auto;
      padding: 0;
      .muListItem {
        border: 0;
        line-height: 40px;
        height: 40px;
        text-align: center;
        display: inline-block;
      }
    }
  }

  .selected {
    color: #267cc1;
  }

  @media screen and (max-width: 900px) {
    .muSwitch {
      width: 100% !important;
    }
  }

</style>
<script>
  import bg19 from '../images/h019.jpg'
  import bg20 from '../images/h020.jpg'
  import bg21 from '../images/h021.jpg'
  import bg22 from '../images/h022.jpg'
  import bg23 from '../images/h023.jpg'
  import bg24 from '../images/h024.jpg'
  import bg25 from '../images/h025.jpg'
  import bg26 from '../images/h026.jpg'
  import bg27 from '../images/h027.jpg'
  import $ from 'jQuery'
  import lang from '../muka/mu/base/lang'
  import listItem from '../muka/mu-vue/List/ListItem'
  import revealList from '../resources/RevealList'
  import banner from '../resources/Banner'
  export default {
    name: 'Reavel',
    components: {
      'ListItem': listItem,
      'RevealList': revealList,
      'Banner': banner
    },
    created: function () {
      this.weixin()
      this.info()
    },
    mounted: function () {
      let _this = this
      let node = $('.muSwitch').children('li')

      // 默认第一个选中
      node.eq(0).addClass('selected')
      node.click(function () {
        if (!$(this).hasClass('selected')) {
          lang.invert(_this.tabData)
        }
        node.each(function () {
          $(this).removeClass('selected');
        })
        $(this).addClass('selected')
      })
    },
    data: () => {
      return {
        // 切换数据
        switchItems: [{
          label: '微信开发'
        }, {
          label: '信息发布平台'
        }],
        // 切换控制
        tabData: {
          list1: true,
          list2: false
        },
        // 显示的数据
        paramsA: {
          title: '微信开发',
          eTitle: 'WECHAT DEVELOPMENT',
          items: [{
            src: bg19,
            title: '佛慧艺术馆',
            eTitle: 'FOHUI MUSEUM OF ART'
          }, {
            src: bg20,
            title: '佛慧艺术馆',
            eTitle: 'FOHUI MUSEUM OF ART'
          }, {
            src: bg21,
            title: '佛慧艺术馆',
            eTitle: 'FOHUI MUSEUM OF ART'
          }, {
            src: bg22,
            title: '佛慧艺术馆',
            eTitle: 'FOHUI MUSEUM OF ART'
          }]
        },
        // 轮播数据
        bannerData: [{
          src: bg27,
          title: '企业产品展示',
          eTitle: 'ENTERPRISE PRODUCT DISPLAY'
        }],
        // 设置别名
        alias: {
          eTitle: 'description',
          src: 'cover_path'
        },
        // 显示的数据
        paramsB: {
          title: '信息发布平台',
          eTitle: 'INFORMATION PLATFORM',
          items: [{
            src: bg23,
            title: '喜来酒店',
            eTitle: 'ANN HELO'
          }, {
            src: bg24,
            title: '喜来酒店',
            eTitle: 'ANN HELO'
          }, {
            src: bg25,
            title: '喜来酒店',
            eTitle: 'ANN HELO'
          }, {
            src: bg26,
            title: '喜来酒店',
            eTitle: 'ANN HELO'
          }]
        }
      }
    },
    methods: {
      'weixin': function () {
        $.ajax("http://onethink.com/index.php?s=/home/index/weixin").then((data) => {
          this.paramsA.items = data
        })
      },
      'info': function () {
        $.ajax("http://onethink.com/index.php?s=/home/index/info").then((data) => {
          this.paramsB.items = data
        })
      }
    }
  }

</script>
